<template>
  <view class="edit-record flexc" v-if="showPage">
    <view class="flex1 over">
      <view class="content-wrap">
        <view class="content-box">
          <view class="flex-between">
            <view class="flex">
              <view class="t">{{ detailObj.detail.title }}</view>
              <view class="edit-text" v-if="pid">修改</view>
            </view>
            <view class="t1">
              {{ detailObj.detail.created_at }}
            </view>
          </view>
          <view class="no">
            序号：{{
              detailObj.detail.production_workshop_no ||
              detailObj.detail.production_section_four_product_no ||
              detailObj.detail.production_section_five_no ||
              detailObj.detail.production_section_five_spot_check_no ||
              detailObj.detail.production_section_one_no ||
              ""
            }}
          </view>
          <view class="t2 mb12" v-if="detailObj.detail.date">
            服务日期：{{ detailObj.detail.date }}
          </view>
          <!-- <view class="t2">养殖户：{{ item.name }}</view> -->
          <view class="flex-between mt34">
            <view class="flex">
              <image
                class="img"
                v-if="detailObj.detail.status != 9"
                src="/static/order/3.png"
                mode="aspectFit"></image>
              <image
                class="img"
                v-if="detailObj.detail.status == 9"
                src="/static/order/4.png"
                mode="aspectFit"></image>
              <text class="ac'">
                {{ detailObj.detail.user_name }}
              </text>
            </view>
            <!-- item.status == 3 ? 'ac2' : item.status == 4 ? 'ac3' : 'ac4' -->
            <view
              :class="
                detailObj.detail.status == 1 ||
                detailObj.detail.status == 2 ||
                detailObj.detail.status == 4 ||
                detailObj.detail.status == 6
                  ? 'ac2'
                  : detailObj.detail.status == 8
                  ? 'ac3'
                  : 'ac4'
              ">
              {{ detailObj.detail.status_name }}
            </view>
          </view>
        </view>
      </view>
      <view class="wrap">
        <view class="box flexc">
          <view class="">备注</view>
          <u--textarea
            v-model="detailObj.detail.info"
            height="200"
            border="none"
            :disabled="pid"
            maxlength="200"
            placeholder="请输入"
            count></u--textarea>
        </view>
      </view>
      <record_status_userVue :formType="type" v-if="!pid" type="2" />

      <template v-if="pid && detailObj.node_list.length > 0">
        <view class="wrap-d p-mark">
          <view class="t-d">流程</view>
          <view
            class="flex p-mark-mb"
            v-for="(item, index) in detailObj.node_list"
            :key="index">
            <view class="avatar-box-d">
              <image
                :src="item.image || '/static/demo.jpg'"
                mode="aspectFit"
                class="avatar-d"></image>
              <image
                v-if="item.pass == 2"
                src="/static/order/s.png"
                mode="aspectFit"
                class="icon-d"></image>
              <image
                v-if="item.pass != 2"
                src="/static/order/w.png"
                mode="aspectFit"
                class="icon"></image>
              <view
                class="b-ac-d"
                v-if="index < detailObj.node_list.length - 1"></view>
            </view>
            <view class="flex1">
              <view class="tip-d">{{ item.title }}</view>
              <view class="tip-c-d">
                {{ item.info }}
              </view>
            </view>
            <view class="date-d" v-if="item.pass == 2">
              {{ item.update_time }}
            </view>
          </view>
        </view>
      </template>
    </view>
    <view class="footer" @click="submitBtn" v-if="!pid">
      <view class="">提交</view>
    </view>
    <view
      class="footer1 flex-between"
      style="padding-left: 32upx"
      v-if="detailObj.is_examine == 1">
      <view class="sh-btn" @click="showPop(0)">拒绝</view>
      <view class="sh-btn" @click="showPop(1)">同意</view>
    </view>
    <!-- 拒绝弹框 -->
    <u-popup :show="show1" mode="bottom" round="20">
      <view class="popup-wrap1">
        <view class="pop-header" @click="() => (show1 = false)">
          <image src="/static/order/close.png" mode="aspectFit"></image>
          <text>
            {{ showPopIndex == 0 ? "确认拒绝" : "确认同意" }}
          </text>
        </view>
        <u--textarea
          v-model="mark"
          border="none"
          height="200"
          placeholder="请输入审批意见"></u--textarea>
        <view class="pop-tip">推荐回复</view>
        <view class="flex">
          <view
            class="pop-box"
            v-for="(item, index) in markList"
            :key="index"
            @click="() => (mark = item.info)">
            {{ item.info }}
          </view>
        </view>
        <view class="pop-btn" @click="submitSHbtn">
          {{ showPopIndex == 0 ? "确认拒绝" : "确认同意" }}
        </view>
      </view>
    </u-popup>
    <!-- 提交成功的弹框 -->
    <u-popup :show="show" mode="center" round="20">
      <view class="popup-wrap">
        <view class="pop-header" @click="() => (show = false)">
          <image src="/static/order/close.png" mode="aspectFit"></image>
        </view>
        <view class="popup-center column-flex-center">
          <image src="/static/order/info.png" mode="aspectFit"></image>
          <view class="t">提交成功</view>
          <view class="">您的发起修改审批提交成功，请耐心等待审批哦~</view>
          <view class="pop-btn" @click="goBack">查看</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import record_status_userVue from "../../../components/order/record_status_user.vue";
export default {
  components: { record_status_userVue },
  data() {
    return {
      showPage: false,
      show: false,
      info: "",
      type: "1",
      pid: false,
      id: "",
      orders: [
        {
          title: "111",
          date: "2023-13-21",
          no: "12331231",
          time: "11-22-22",
          name: "131231",
          status: 3,
          t: "ss",
          t1: "323",
        },
      ],
      detailObj: {},
      qualityUrl: {
        101: "get_quality_control_detail",
      },
      actionUrl: {
        1: "/get_seeding_service_log_detail",
        2: "/get_breed_service_log_detail",
        3: "/get_catch_production_log_detail",
        4: "/get_catch_transport_log_detail",
        5: "/get_production_section_one_white_bar_detail",
        6: "/get_production_section_one_sideline_detail",
        7: "/get_production_workshop_detail",
        8: "/get_production_section_four_product_detail",
        9: "/get_production_section_four_white_bar_detail",
        10: "/get_production_section_five_detail",
        11: "/get_production_section_five_spot_check_detail",
      },
      isQuality_page: false,
      showPopIndex: 0,
      markList: [],
      show1: false,
      mark: "",
    };
  },
  onLoad(options) {
    const { type, pid, id } = options;
    if (type == "101") {
      this.type = options.form_type;
      this.isQuality_page = true;
    } else if (type == "11") {
      this.type = "17";
    } else {
      this.type = type;
    }
    this.pid = pid && JSON.parse(pid);
    this.id = id || "";
    this.getCommon();
  },

  methods: {
    //审核提交
    submitSHbtn() {
      this.$api({
        url: "/change",
        method: "post",
        data: {
          id: this.detailObj.detail.id,
          form_type: this.type,
          status: this.showPopIndex == 0 ? "2" : "1",
          info: this.mark,
        },
      }).then((res) => {
        this.show1 = false;
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 2000);
      });
    },
    //点击同意，拒绝弹框
    showPop(k) {
      const info_type = k == 0 ? "2" : "1";
      this.markList = [];
      this.showPopIndex = k;
      this.$api({
        url: "/getInfo",
        method: "get",
        data: {
          info_type,
        },
      }).then((res) => {
        if (res.code === 200 && res.data.length > 0) {
          this.show1 = true;
          this.markList = res.data;
        }
      });
    },
    goBack() {
      this.toRoute({
        path: "/order-list",
        mode: "redirectTo",
      });
    },
    //发起修改
    submitBtn() {
      this.$api({
        url: "/modification_approval",
        method: "post",
        data: {
          id: this.id,
          info: this.detailObj.detail.info,
          form_type: this.isQuality_page
            ? 101
            : this.type == "17"
            ? "11"
            : this.type,
        },
      }).then((res) => {
        if (res.code === 200) {
          this.show = true;
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      });
    },
    //详情接口
    getCommon() {
      this.$api({
        url: this.isQuality_page
          ? this.qualityUrl[101]
          : this.actionUrl[this.type],
        method: "get",
        data: {
          type: "0",
          id: this.id,
        },
      }).then((res) => {
        if (res.code === 200) {
          this.detailObj = res.data;
          this.showPage = true;
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateBack();
          }, 2000);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.edit-record {
  width: 100%;
  height: 100%;
  background: #f5f7f9;
  ::v-deep .u-popup {
    flex: 0 !important;
  }
  ::v-deep.u-textarea--disabled {
    background: #fff;
  }
  .content-wrap {
    padding: 24upx;
    .content-box {
      padding: 32upx 32upx 28upx;
      background: #fff;
      margin-bottom: 20upx;
      font-size: 24rpx;
      color: #8d8d8d;
      .t {
        font-size: 32rpx;
        color: #171717;
      }
      .t1 {
        color: #afafaf;
      }
      .edit-text {
        width: 78rpx;
        height: 36rpx;
        background: #f17303;
        font-size: 24rpx;
        color: #ffffff;
        border-radius: 14upx 0 14upx 0;
        margin-left: 16upx;
        text-align: center;
        line-height: 36upx;
      }
      .no {
        margin-top: 30upx;
        margin-bottom: 12upx;
        color: #8d8d8d;
      }
      .t2 {
        color: #8d8d8d;
      }
      .mb12 {
        margin-bottom: 12upx;
      }
      .ac {
        font-size: 26rpx;
        color: #8d8d8d;
      }
      .ac1 {
        font-size: 26rpx;
        color: #171717;
      }
      .img {
        width: 40upx;
        height: 40upx;
        margin-right: 8upx;
      }
      .ac2 {
        font-size: 26rpx;
        color: #f17303;
      }
      .ac3 {
        font-size: 26rpx;
        color: #0cb18e;
      }
      .ac4 {
        font-size: 26rpx;
        color: #8d8d8d;
      }
      .mt34 {
        margin-top: 34upx;
      }
    }
  }
  .wrap {
    background: #fff;
    padding: 0 32upx;
    margin-bottom: 16upx;
    .box {
      padding: 28upx 0;
      font-size: 32rpx;
      // border-bottom: 1rpx solid #e4e4e4;
      & > view {
        font-size: 32rpx;
        color: #161616;
      }
      & > input {
        height: 28upx;
        margin-top: 28upx;
      }

      .box-b {
        margin-top: 28upx;
        & > input {
          height: 28upx;
        }
        & > image {
          width: 12upx;
          height: 21upx;
        }
      }
      ::-webkit-input-placeholder {
        color: #a0a0a0;
      }
    }

    .l-wrap {
      padding: 58upx 8upx 30upx 54upx;
      .l-box {
        position: relative;
        margin-bottom: 38upx;
        &-c {
          position: absolute;
          top: 0;
          left: -32upx;
          width: 16rpx;
          height: 16rpx;
          background: #d7d7d7;
          border-radius: 50%;
        }
        &-line {
          position: absolute;
          top: 28upx;
          left: -25upx;
          width: 2upx;
          height: 100upx;
          background: #d7d7d7;
        }
        &-title {
          font-size: 24rpx;
          color: #a0a0a0;
          & > view:nth-of-type(1) {
            font-size: 32rpx;
            color: #3d3d3d;
            margin-bottom: 12upx;
          }
        }
        &-r {
          &-t {
            font-size: 24rpx;
            color: #a0a0a0;
            & > image {
              width: 68rpx;
              height: 68rpx;
              margin-bottom: 8upx;
            }
          }
          .arrow {
            width: 32upx;
            height: 32upx;
            margin-left: 10upx;
            margin-right: 10upx;
            margin-top: 18upx;
          }
          &-add {
            width: 68rpx;
            height: 68rpx;
            background: #ffffff;
            border-radius: 12rpx 12rpx 12rpx 12rpx;
            border: 2rpx solid #ededed;
            & > image {
              width: 36upx;
              height: 36upx;
            }
          }
        }
      }
    }
  }
  .footer {
    padding: 8upx 32upx;
    padding-bottom: env(safe-area-inset-bottom);
    background: #fff;
    & > view {
      width: 686rpx;
      height: 80rpx;
      background: #da4334;
      border-radius: 422rpx 422rpx 422rpx 422rpx;
      border: 1rpx solid #dafbff;
      text-align: center;
      line-height: 80upx;
      font-size: 28rpx;
      color: #ffffff;
    }
  }
  .popup-wrap {
    width: 640upx;
    box-sizing: border-box;
    padding: 42upx 36upx;
    .pop-header {
      margin-bottom: 66upx;
      & > image {
        width: 22upx;
        height: 22upx;
        margin-left: auto;
        display: block;
      }
    }
    .popup-center {
      font-size: 24rpx;
      color: #8e8e8e;
      & > image {
        width: 152upx;
        height: 136upx;
        margin-bottom: 20upx;
      }
      .t {
        font-weight: bold;
        font-size: 32rpx;
        color: #000000;
        margin-bottom: 20upx;
      }
      .pop-btn {
        width: 314rpx;
        height: 80rpx;
        background: #da4334;
        border-radius: 42rpx 42rpx 42rpx 42rpx;
        border: 1rpx solid #dafbff;
        text-align: center;
        line-height: 80upx;
        font-size: 28rpx;
        color: #ffffff;
        margin-top: 96upx;
      }
    }
  }
  .wrap-d {
    padding: 0 32upx;
    background: #fff;
    .box-d {
      background: #fff;
      padding: 28upx 0;
      border-bottom: 1rpx solid #e4e4e4;
      font-size: 32rpx;
      color: #a0a0a0;
      &-des {
        font-size: 32rpx;
        color: #171717;
        margin-top: 28upx;
      }
    }
    .box2-d {
      box-sizing: border-box;
      height: 356upx;
    }
    .box-d:last-child {
      border-bottom: none;
    }
    .t-d {
      font-weight: bold;
      font-size: 32rpx;
      color: #161616;
      margin-bottom: 40upx;
    }
    .avatar-box-d {
      position: relative;
      width: 68upx;
      height: 68upx;
      margin-right: 22upx;
      .avatar-d {
        width: 100%;
        height: 100%;
      }
      .icon-d {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 32upx;
        height: 32upx;
      }
    }
    .tip-d {
      font-size: 28rpx;
      color: #a0a0a0;
      margin-bottom: 14upx;
    }
    .tip-c-d {
      font-size: 28rpx;
      color: #171717;
    }
    .date-d {
      font-size: 24rpx;
      color: #a0a0a0;
    }

    .b-ac-d {
      position: absolute;
      width: 2rpx;
      height: 56rpx;
      background: #d7d7d7;
      bottom: -76upx;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .p-mark {
    padding: 28upx 32upx 10upx;
    &-mb {
      margin-bottom: 74upx;
    }
    &-mb:last-child {
      margin-bottom: 52upx;
    }
  }
}
.footer1 {
  padding: 8upx 32upx 8upx 70upx;
  background: #fff;
  font-size: 24rpx;
  color: #9f9ea3;
  box-shadow: 0rpx -8rpx 20rpx 0rpx rgba(0, 0, 0, 0.0588);
  .edit {
    width: 37upx;
    height: 37upx;
    margin-bottom: 10upx;
  }
  .edit1 {
    width: 35rpx;
    height: 37rpx;
    margin-bottom: 12upx;
  }
  &-btn {
    width: 372rpx;
    height: 80rpx;
    background: #da4334;
    border-radius: 422rpx 422rpx 422rpx 422rpx;
    border: 1rpx solid #dafbff;
    text-align: center;
    line-height: 80upx;
    font-size: 28rpx;
    color: #ffffff;
  }
  .sh-btn {
    width: 328rpx;
    height: 80rpx;
    background: #f2f1f6;
    border-radius: 42rpx 42rpx 42rpx 42rpx;
    border: 1rpx solid #eaecee;
    text-align: center;
    line-height: 80upx;
    font-size: 28rpx;
    color: #171717;
  }
  .sh-btn:nth-of-type(2) {
    background: #da4334;
    color: #ffffff;
  }
}
.popup-wrap1 {
  padding: 34upx 32upx 0;
  width: 100%;
  box-sizing: border-box;
  .pop-header {
    position: relative;
    font-weight: bold;
    text-align: center;
    font-size: 28rpx;
    color: #181818;
    margin-bottom: 20upx;
    & > image {
      position: absolute;
      width: 32upx;
      height: 32upx;
      left: 30upx;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .pop-tip {
    font-size: 26rpx;
    color: #737373;
    margin-bottom: 24upx;
    margin-top: 20upx;
  }
  .pop-box {
    padding: 12upx 20upx;
    background: #eaebed;
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    font-size: 26rpx;
    color: #191919;
    margin-right: 18upx;
  }
  .pop-btn {
    height: 80rpx;
    background: #da4334;
    border-radius: 42rpx 42rpx 42rpx 42rpx;
    line-height: 80upx;
    text-align: center;
    margin-top: 106upx;
    font-size: 28rpx;
    color: #ffffff;
  }
}
</style>
